<template>
<div class="">
    <div class="pr10">
        <div class="analyItem">
            <p class="analyItemTit tx-center">状态</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="cLightGray pr8">合同额</span>
                    <span>{{(paraBaseInfo !== null && paraBaseInfo.Receivable !== null ? (paraBaseInfo.Receivable/10000).toFixed(2) : 0 )}}万</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">应收</span>
                    <span class="cGreen" >{{(paraBaseInfo !== null && paraBaseInfo.Receivable !== null ? (paraBaseInfo.Receivable/10000).toFixed(2) : 0)}}万</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">已收</span>
                    <span class="cGreen">{{(paraBaseInfo !== null && paraBaseInfo.Received !== null ? (paraBaseInfo.Received/10000).toFixed(2) : 0)}}万</span>
                </p>
                <p class="fl" v-if="((paraBaseInfo !== null && paraBaseInfo.Received !== null ? paraBaseInfo.Received : ( 0 / (paraBaseInfo !== null && paraBaseInfo.Receivable !== null ? paraBaseInfo.Receivable : 0)))*100) < 80 || (paraBaseInfo !== null && paraBaseInfo.Receivable !== null ? paraBaseInfo.Receivable : 0) === 0">
                    <span class="circlemark circlemark-lightRed">差</span>
                </p>
                <p class="fl" v-else-if="((paraBaseInfo !== null && paraBaseInfo.Received !== null ? paraBaseInfo.Received : 0) / (paraBaseInfo !== null && paraBaseInfo.Receivable !== null ? paraBaseInfo.Receivable : 0))*100 && ((paraBaseInfo !== null && paraBaseInfo.Received !== null ? paraBaseInfo.Received : 0) / (paraBaseInfo !== null && paraBaseInfo.Receivable !== null ? paraBaseInfo.Receivable : 0))*100 < 100">
                    <span class="circlemark circlemark-lightGreen">良</span>
                </p>
                <p class="fl" v-else>
                    <span class="circlemark circlemark-green">优</span>
                </p>
            </div>
        </div>
    </div>
    <div class="thinScroll pr10" v-scrollHeight="84">
        <router-link tag="div" :to="{path:routerPath('paraBaseThree')}" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">基础</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="cLightGray pr8">合同额</span>
                    <span>{{(paraBaseInfo !== null &&  paraBaseInfo .Receivable !== null ? (paraBaseInfo .Receivable/10000).toFixed(2) : 0)}}万</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">应收</span>
                    <span class="cGreen">{{(paraBaseInfo !== null &&  paraBaseInfo.Receivable !== null ? (paraBaseInfo.Receivable/10000).toFixed(2) : 0)}}万</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">已收</span>
                    <span class="cGreen">{{(paraBaseInfo !== null &&  paraBaseInfo.Received !== null ? (paraBaseInfo.Received/10000).toFixed(2) : 0)}}万</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">差额</span>
                    <span class="cGreen">{{(paraBaseInfo !== null &&  paraBaseInfo.NoReceived !== null ? (paraBaseInfo.NoReceived/10000).toFixed(2) : 0)}}万</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">减项</span>
                    <span class="cRed">{{(paraBaseInfo !== null &&  paraBaseInfo.Deduction !== null ? (paraBaseInfo.Deduction/10000) : 0)}}</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8" v-if="paraBaseInfo !== null && paraBaseInfo.DiffDay !== null && paraBaseInfo.DiffDay>=0">回款天数</span>
                    <span class="cLightGray pr8" v-else>超期</span>
                    <span  :class="paraBaseInfo !== null && paraBaseInfo .DiffDay < 0 ? 'cRed':'cGreen'">{{(paraBaseInfo !== null &&  paraBaseInfo.DiffDay !== null ? paraBaseInfo .DiffDay : 0)}}天</span>
                </p>
                <p class="col-md-8">
                    <span class="cLightGray pr8">回款占比</span>
                    <span>{{paraBaseInfo !== null && paraBaseInfo.SumKXRatio !== null ? paraBaseInfo .SumKXRatio : 0}}</span>
                </p>
            </div>
        </router-link>
        <router-link tag="div" :to="{path:routerPath('paraFabaoThree'), query:{proPaymentInfo: proPaymentInfo}}" exact class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">发包</p>
            <div class="analyItemCon">
                <p class="col-md-4 cRed">
                    <span class="cLightGray pr8 cRed">发包额</span>
                    <span> {{proPaymentInfo !== null && proPaymentInfo.Payable !== null ? proPaymentInfo.Payable :0}}元</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">计划总额</span>
                    <span> {{proPaymentInfo !== null  && proPaymentInfo.Payable !== null ? proPaymentInfo.Payable :0}}元</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">可用总额</span>
                    <span>{{proPaymentInfo !== null  && proPaymentInfo.ProjectAllMoney !== null ? proPaymentInfo.ProjectAllMoney :0}}元</span>
                </p>
            </div>
        </router-link>
        <router-link tag="div" :to="{path:routerPath('parPersonThree'), query:{proPaymentInfo: proPaymentInfo}}" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">人工</p>
            <div class="analyItemCon">
               <p class="col-md-6">
                    <span class="cLightGray pr8">可用额度</span>
                    <span>{{proPaymentInfo !== null && proPaymentInfo.RenGongMoney !== null ? proPaymentInfo.RenGongMoney : 0 }}元</span>
                </p>
                <p class="col-md-6">
                    <span class="cLightGray pr8">计划额度</span>
                    <span> {{proPaymentInfo !== null && proPaymentInfo.SumArtificialMoney !== null ? proPaymentInfo.SumArtificialMoney : 0 }}元</span>
                </p>
            </div>
        </router-link>
        <router-link tag="div" :to="{path:routerPath('parMarThree'), query:{proPaymentInfo: proPaymentInfo}}" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">材料</p>
            <div class="analyItemCon">
                <p class="col-md-6">
                    <span class="cLightGray pr8" title="材料可批款支付额度">财务额度</span>
                    <span>{{proPaymentInfo !== null && proPaymentInfo.CaiLiaoMoney !== null ? proPaymentInfo.CaiLiaoMoney : 0 }}元</span>
                </p>
                <p class="col-md-6">
                    <span class="cLightGray pr8" title="材料的下单总金额">计划额度</span>
                    <span>{{proPaymentInfo !== null && proPaymentInfo.SumMaterialMoney !== null ?proPaymentInfo.SumMaterialMoney : 0 }}元</span>
                </p>
            </div>
        </router-link>
        <router-link tag="div" :to="{path:routerPath('parFineThree')}" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">奖罚</p>
            <div class="analyItemCon">
                <p class="col-md-6">
                    <span class="cLightGray pr8">发起</span>
                    <span>{{faSum}}元</span>
                </p>
                <p class="col-md-6">
                    <span class="cLightGray pr8">执行</span>
                    <span class="cGreen">{{zhiSum}}元</span>
                </p>
            </div>
        </router-link>
        <!-- <router-link tag="div" :to="routerPath('default?6')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">支款</p>
            <div class="analyItemCon">
                <p class="col-md-6">
                    <span class="cLightGray pr8">当前额度</span>
                    <span>{{personMoney !== null && personMoney.keMoney  !== null ?personMoney.keMoney: 0 }}元</span>
                </p>
                <p class="col-md-6">
                    <span class="cLightGray pr8">人工款</span>
                    <span>{{personMoney !== null && personMoney.money  !== null ?personMoney.money: 0 }}元</span>
                </p>
            </div>
        </router-link> -->
    </div>
    <div class="pr10">
        <div class="analyItem">
            <p class="analyItemTit tx-center">处理</p>
            <div class="analyItemCon">
                <div class="col-md-12">
                    <p class="col-md-4">
                        <span class="cLightGray pr8">合同额</span>
                        <span>{{(paraBaseInfo !== null && paraBaseInfo.Receivable !== null ? (paraBaseInfo.Receivable/10000).toFixed(2) : 0 )}}万</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">应收</span>
                        <span class="cGreen" >{{(paraBaseInfo !== null && paraBaseInfo.Receivable !== null ? (paraBaseInfo.Receivable/10000).toFixed(2) : 0)}}万</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">已收</span>
                        <span class="cGreen">{{(paraBaseInfo !== null && paraBaseInfo.Received !== null ? (paraBaseInfo.Received/10000).toFixed(2) : 0)}}万</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getCompositeFunds, getProjectPayment, findGcProjectFinesByOrderId } from '../Resources/Api/paragraph'
export default {
    data () {
        return {
            paraBaseInfo: null, // 合同额基础数据
            proPaymentInfo: null, // 发包 人工 材料数据
            zhiSum: 0, // 执行钱数
            faSum: 0, // 共钱总和
            personMoney: null // 支款数据
        }
    },
    created () {
        // 获取合同额等基础数据
        this.getCompositeFunds()
        // 获取发包 人工 材料款项数据
        this.getProjectPayment()
        // 获取奖罚
        this.findGcProjectFinesByOrderId()
        // 获取支款
        this.GetMoneyInfo()
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    methods: {
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        },
        // 获取合同额基础信息
        getCompositeFunds () {
            getCompositeFunds({
                orderId: this.leftInfo.orderno
                // orderId: '12-201542'
            }).then(results => {
                if (results.data.StatusCode === 1) {
                    this.paraBaseInfo = results.data.Body[0]
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 获取发包 人工 材料 款项数据
        getProjectPayment () {
            getProjectPayment({
                orderId: this.leftInfo.orderno
                // orderId: '12-201542'
            }).then(results => {
                if (results.data.StatusCode === 1) {
                    this.proPaymentInfo = results.data.Body[0]
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 获取奖罚接口
        findGcProjectFinesByOrderId () {
            findGcProjectFinesByOrderId({
                orderId: this.leftInfo.orderno
                // type: '12-201542',
            }).then(results => {
                if (results.data.StatusCode === 0) {
                    const data = results.data.Body
                    data.forEach(item => {
                        this.faSum += item.FineMoney
                        if (item.FineState === 3) {
                            this.zhiSum += item.FineMoney
                        }
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        }
        // 获取支款
        // GetMoneyInfo () {
        //     GetMoneyInfo({
        //         orderno: this.leftInfo.orderno
        //     }).then(results => {
        //         if (results.data.StatusCode === 1) {
        //             this.personMoney = results.data.Body
        //         }
        //     }).catch(error => {
        //         console.log(error)
        //     })
        // }
    },
    watch: {
        leftInfo () {
            // 获取合同额等基础数据
            this.getCompositeFunds()
            // 获取发包 人工 材料款项数据
            this.getProjectPayment()
            // 获取奖罚
            this.findGcProjectFinesByOrderId()
        }
    }
}
</script>
